<template>
  <el-container>
    <!-- 查询栏 -->
    <div style="
        background-color: #fff;
        margin: 10px 0;
        box-shadow: 10px 10px 18px 0 rgba(0, 0, 0, 0.12);
        border-radius: 3px;
        width: 100%;
      " class="propertyre">
      <el-row style="margin: 1% auto; font-size: 20px; text-align: center">流转审核</el-row>
      <el-form :model="formData" ref="formData" :inline="true" style="margin: 1% auto; text-align: center">
        <el-row>
          <!-- <el-form-item label="权利人姓名" prop="obligee">
              <el-input placeholder="请输入权利人姓名" v-model="formData.obligee" clearable></el-input>
            </el-form-item> -->
          <el-form-item label="权利人身份证号码" prop="obligeeIdCard">
            <el-input placeholder="请输入权利人身份证号码" v-model="formData.obligeeIdCard" clearable></el-input>
          </el-form-item>
          <!-- <el-form-item label="承租人姓名" prop="lessee">
              <el-input  placeholder="请输入承租人姓名" v-model="formData.lessee" clearable></el-input>
            </el-form-item> -->
          <el-form-item label="承租人身份证号码" prop="lesseeIdCard">
            <el-input placeholder="请输入承租人身份证号码" v-model="formData.lesseeIdCard" clearable></el-input>
          </el-form-item>
          <el-form-item label="流转编号" prop="circulationCode">
            <el-input placeholder="请输入流转编号" v-model="formData.circulationCode" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitProperForm('formData')">搜索</el-button>
            <el-button @click="resetProperForm('formData')">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <el-card style="margin-top: 10px">
      <el-main>
        <el-table style="width: 100%" :data="tableData.data">
          <el-table-column type="expand" width="15px">
            <template slot-scope="props">
              <!-- 展开行 -->
              <el-form label-position="left" inline class="demo-table-expand">
                <el-row :gutter="20">
                  <el-col :span="10">
                    <el-form-item label="权利人" prop="obligee">
                      <span>{{ props.row.obligee }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="权利人身份证号码" prop="obligeeIdCard">
                      <span>{{ props.row.obligeeIdCard }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="10">
                    <el-form-item label="权利人电话" prop="obligeePhone">
                      <span>{{ props.row.obligeePhone }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="权利人地址" prop="obligeeAddress">
                      <span>{{ props.row.obligeeAddress }}</span>
                      <br /><br />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="10">
                    <el-form-item label="承租人" prop="lessee">
                      <span>{{ props.row.lessee }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="承租人身份证号码" prop="lesseeIdCard">
                      <span>{{ props.row.lesseeIdCard }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="10">
                    <el-form-item label="承租人电话" prop="lesseePhone">
                      <span>{{ props.row.lesseePhone }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="权利人地址" prop="lesseeAddress">
                      <span>{{ props.row.lesseeAddress }}</span>
                      <br /><br />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="10">
                    <el-form-item label="流转编号" prop="circulationCode">
                      <span>{{ props.row.circulationCode }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="合同编号" prop="contractCode">
                      <span>{{ props.row.contractCode }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="10">
                    <el-form-item label="流转面积(㎡)" prop="circulationArea">
                      <span>{{ props.row.circulationArea }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="流转价格" prop="circulationPrice">
                      <span>{{ props.row.circulationPrice }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="10">
                    <el-form-item label="现状描述" prop="currentSituationDescription">
                      <span>{{ props.row.currentSituationDescription }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="房屋结构" prop="housingStructure">
                      <span>{{ props.row.housingStructure }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="10">
                    <el-form-item label="流转方式" prop="circulationMode">
                      <span>{{ props.row.circulationMode }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="流转期限" prop="circulationPeriod">
                      <span>{{ props.row.circulationPeriod }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="10">
                    <el-form-item label="组织名称" prop="organizationName">
                      <span>{{ props.row.organizationName }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="信用代码" prop="creditCode">
                      <span>{{ props.row.creditCode }}</span>
                      <br /><br />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="20">
                    <el-form-item label="备注" prop="common">
                      <span>{{ props.row.common }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column prop="obligee" label="权利人" align="center"></el-table-column>
          <el-table-column prop="createTime" label="申请时间" align="center"></el-table-column>
          <el-table-column prop="ownership" label="权属" align="center" :formatter="ownershipFormart"></el-table-column>
          <el-table-column prop="circulationType" label="流转类型" align="center" :formatter="registrationTypeFormart">
          </el-table-column>
          <el-table-column prop="state" label="审核状态" align="center" :formatter="stateFormart"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="editData(scope.$index, scope.row)">数据修改</el-button>
              <el-button type="text" size="small" @click="passData(scope.$index, scope.row)">申请通过</el-button>
              <el-button type="text" size="small" @click="bohuiData(scope.$index, scope.row)">驳回申请</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <div class="block">
        <el-pagination @size-change="changePageSize" @current-change="changeCurrentPage" @prev-click="prevPage"
          @next-click="nextPage" :current-page="tableData.currentPage" :page-sizes="[5, 10, 15, 20, 25, 30, 35, 40]"
          :page-size="tableData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
        </el-pagination>
      </div>
    </el-card>
    <el-footer> </el-footer>
    <!-- 驳回申请 -->
    <el-dialog title="驳回申请" :visible.sync="bohuiVisible">
      <el-form :model="formData" ref="formData" style="margin: 1% auto; text-align: center">
        <el-form-item label="驳回理由：">
          <el-input type="textarea" :autosize="{ minRows: 10, maxRows: 15 }" placeholder="请输入内容"
            v-model="formData.common">
          </el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" icon="el-icon-edit-outline" @click="submitBoHui">确认驳回申请</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
  import {
    getPropertyreApi,
    editDataPassApi,
    selectLikeProperApi,
    boHuiDataApi,
  } from "@/api/propertyreApi";
  import store from "@/vuex/store";
  export default {
    data() {
      return {
        editVisible: false,
        bohuiVisible: false,
        tableData: {
          //表格数据
          data: [{
            id: "",
            obligee: "", //权利人
            ownership: "", //权属
            createTime: "", //创建日期
            updateTime: "", //修改日期
            circulationType: "", //流转类型
            state: "", //审核状态
            circulationCode: "", //流转编号
            organizationName: "", //组织名称
            obligeeIdCard: "", //权利人身份证号码
            obligeePhone: "", //权利人电话
            obligeeAddress: "", //权利人地址
            common: "", //备注
            contractCode: "", //合同编号
            lessee: "", //承租人
            lesseeIdCard: "", //承租人身份证号码
            lesseePhone: "", //承租人电话
            lesseeAddress: "", //承租人地址
            circulationArea: "", //流转面积
            circulationPrice: "", //流转价格
            housingStructure: "", //房屋结构
            currentSituationDescription: "", //现状描述
            circulationPeriod: "", //流转期限
            creditCode: "", //信用代码
            circulationMode: "", //流转方式
            obligeeImgFront: "", //权利人证件正面
            lesseeImgFront: "", //承租人证件正面
            obligeeImgBack: "", //权利人证件背面
            lesseeImgBack: "", //承租人证件背面
          }, ],
          currentPage: 1,
          pageSize: 10,
          total: 0,
        },
        formData: {
          id: "",
          obligee: "", //权利人
          ownership: "", //权属
          createTime: "", //创建日期
          updateTime: "", //修改日期
          circulationType: "", //流转类型
          state: "", //审核状态
          circulationCode: "", //流转编号
          organizationName: "", //组织名称
          obligeeIdCard: "", //权利人身份证号码
          obligeePhone: "", //权利人电话
          obligeeAddress: "", //权利人地址
          common: "", //备注
          contractCode: "", //合同编号
          lessee: "", //承租人
          lesseeIdCard: "", //承租人身份证号码
          lesseePhone: "", //承租人电话
          lesseeAddress: "", //承租人地址
          circulationArea: "", //流转面积
          circulationPrice: "", //流转价格
          housingStructure: "", //房屋结构
          currentSituationDescription: "", //现状描述
          circulationPeriod: "", //流转期限
          creditCode: "", //信用代码
          circulationMode: "", //流转方式
          obligeeImgFront: "", //权利人证件正面
          lesseeImgFront: "", //承租人证件正面
          obligeeImgBack: "", //权利人证件背面
          lesseeImgBack: "", //承租人证件背面
        },
      };
    },
    created: function () {
      this.getAllPropertyre(); //获取所有数据列表
    },
    methods: {
      //格式化时间
      timeFormart(row) {
        var date = new Date(row.createTime); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + "-";
        var M =
          (date.getMonth() + 1 < 10 ?
            "0" + (date.getMonth() + 1) :
            date.getMonth() + 1) + "-";
        var D = date.getDate() + " ";
        var h = date.getHours() + ":";
        var m = date.getMinutes() + ":";
        var s = date.getSeconds();
        return Y + M + D + " " + h + m + s;
      },
      changePageSize(val) {
        this.tableData.pageSize = val;
        this.getAllPropertyre();
      },
      changeCurrentPage(val) {
        this.tableData.currentPage = val;
        this.getAllPropertyre();
      },
      prevPage(val) {
        this.tableData.currentPage = val;
        this.getAllPropertyre();
      },
      nextPage(val) {
        this.tableData.currentPage = val;
        this.getAllPropertyre();
      },
      //获取所有数据列表
      getAllPropertyre() {
        getPropertyreApi(this.tableData).then((res) => {
          this.tableData.data = res.data.data.items;
          this.tableData.total = res.data.data.total;
        });
      },
      //权属
      ownershipFormart(row) {
        console.log(row)
        if (row.ownership == 0) {
          return "未知";
        } else if (row.ownership == 1) {
          return "土地所有权";
        } else if (row.ownership == 2) {
          return "国有建设用地使用权";
        } else if (row.ownership == 3) {
          return "宅基地使用权";
        } else if (row.ownership == 4) {
          return "集体建设用地使用权";
        } else if (row.ownership == 5) {
          return "土地承包经营权";
        } else if (row.ownership == 6) {
          return "林地使用权";
        } else if (row.ownership == 7) {
          return "海域使用权";
        } else if (row.ownership == 8) {
          return "无居民海岛使用权";
        } else if (row.ownership == 9) {
          return "房屋所有权";
        } else if (row.ownership == 10) {
          return "构筑物所有权";
        }
      },
      //登记类型
      registrationTypeFormart(row) {
        if (row.circulationType == 0) {
          return "未知";
        } else if (row.circulationType == 1) {
          return "首次登记";
        } else if (row.circulationType == 2) {
          return "转移登记";
        } else if (row.circulationType == 3) {
          return "变更登记";
        } else if (row.circulationType == 4) {
          return "注销登记";
        } else if (row.circulationType == 5) {
          return "更正登记";
        } else if (row.circulationType == 6) {
          return "异议登记";
        } else if (row.circulationType == 7) {
          return "预告登记";
        } else if (row.circulationType == 8) {
          return "查封登记";
        } else if (row.circulationType == 9) {
          return "其他";
        }
      },
      //审核状态
      stateFormart(row) {
        if (row.state == 0) {
          return "待审核";
        } else if (row.state == 1) {
          return "通过审核";
        } else if (row.state == 2) {
          return "未审核";
        } else if (row.state == 3) {
          return "驳回审核";
        }
      },
      //修改弹窗
      editData(index, row) {
        //this.editVisible=true;
        this.$router.push({
          path: "/propertyreTable",
          query: row,
        });
      },
      //申请通过
      passData(index, row) {
        editDataPassApi(row.id)
          .then((res) => {
            this.$message.success(res.data.respondMessage);
            this.getAllPropertyre();
          })
          .catch((res) => {
            this.$message.error(res.data.respondMessage);
            this.getAllPropertyre();
          });
      },
      //驳回申请
      bohuiData(index, row) {
        this.bohuiVisible = true;
        this.formData.id = row.id;
        this.formData.common = row.common;
      },
      //确认驳回
      submitBoHui() {
        boHuiDataApi(this.formData)
          .then((res) => {
            this.$message.success(res.data.respondMessage);
            this.getAllPropertyre();
            this.bohuiVisible = false;
          })
          .catch((res) => {
            this.$message.error(res.data.respondMessage);
            this.getAllPropertyre();
          });
      },
      //模糊查询
      submitProperForm(formData) {
        this.$refs[formData].validate((valid) => {
          if (valid) {
            selectLikeProperApi(this.formData)
              .then((res) => {
                this.tableData.data = res.data.data.items;
                this.tableData.total = res.data.data.total;
                this.$message({
                  showClose: true,
                  message: "搜索成功",
                  type: "success",
                });
                //this.resetForm(formData);
              })
              .catch((error) => {
                this.$message({
                  showClose: true,
                  message: error.data.respondMessage,
                  type: "error",
                });
              });
          } else {
            return false;
          }
        });
      },
      // 清空表单选项
      resetProperForm(formData) {
        this.$refs[formData].resetFields();
        this.getAllPropertyre();
      },
    },
  };
</script>

<style>
  .propertyre .el-form--inline .el-form-item__label {
    width: 200px;
  }

  .propertyre .el-form--inline .el-form-item__label {
    font-size: 15px;
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }
</style>